<template>
  <div class="sideMenu">
    <!-- 左侧蒙层 -->
    <div class="shadow" @click="toggleSideMenu" v-if="show"></div>
    <div class="menu-content">
      <h1 class="title">
        <div class="logo">
          <img :src="nav.company.logo" alt="logo">
        </div>
      </h1>
      <accordion-menu></accordion-menu>
      <div class="about-us">
        <img class="qrcode" :src="nav.company.qrcode" alt="">
        <p class="intro-text">
          {{nav.company.advertisment}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import accordionMenu from 'src/views/accordionMenu/accordionMenu'
  export default {
    data () {
      return {
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      toggleSideMenu () {
        this.$emit('toggle')
      }
    },
    computed: {
      ...mapGetters([
        'nav'
      ])
    },
    components: {
      accordionMenu
    }
  }
</script>

<style lang="scss" scoped>
  .sideMenu {
  	position: fixed;
  	z-index: 99;
  	left: 0;
  	top: 0;
  	bottom: 0;
  	box-sizing: border-box;
  	width: rem(400);
  	height: 100%;
  	background-color: #333;
  	box-shadow: 2px 0 3px 0px rgba(0, 0, 0, 0.16);
  	text-align: center;
  	.menu-content {
  		position: relative;
  		box-sizing: border-box;
  		width: 100%;
  		height: 100%;
  		overflow: auto;
  		.title {
  			position: relative;
  			height: rem(110);
  			border-bottom: 1px solid #434343;
  			.logo {
  				position: absolute;
  				left: rem(30);
  				top: 50%;
  				transform: translate(0, -50%);
  				width: rem(328);
  				height: rem(49);
          overflow: hidden;
          img {
            width: 100%;
          }
  			}
  		}
  		.qrcode {
  			display: block;
  			margin: rem(40) auto;
  			width: rem(260);
  			height: rem(260);
  		}
  		.scan-text {
  			margin-top: rem(-20);
  			margin-bottom: rem(60);
  			font-size: rem(28);
  			line-height: rem(38);
  		}
  		.about-us {
  			width: 100%;
  			.social {
  				margin-bottom: rem(15);
  				display: flex;
  				justify-content: space-around;
  				align-items: center;
  				span {
  					display: block;
  					width: rem(80);
  					height: rem(80);
  					line-height: rem(80);
  					text-align: center;
  					border-radius: 50%;
  					background-color: #00dfb9;
  					color: #fff;
  					transition: all 0.2s;
  					.iconfont {
  						font-size: rem(50);
  					}
  					&:active {
  						background-color: #fff;
  						color: #00dfb9;
  					}
  				}
  			}
  			.intro-text {
  				font-size: rem(28);
  				margin: 0 auto rem(42);
  				line-height: rem(42);
  				width: 10em;
  				color: #fff;
  			}
  		}
  	}
  	.shadow {
  		position: absolute;
  		right: rem(-350);
  		width: rem(350);
  		height: 100%;
  	}
  }
</style>
